<template>
  <div class="box">
    <div class="box_left">
      <Common-Slider-Bar
        ref="silderBar"
        :item-view-option="{
          itemTitle: 'CENTERPRISENAME1',
          key: 'CENTERPRISECODE1',
          menuTitle: 'CENTERPRISENAME1'
        }"
        search-key-symbol="is"
        :auto-selected="false"
        :request="{
          url: url + '/dynamicReportForm/queryBodyByProduce',
          method: 'post',
          data: {
            year: 2021,
            pageIndex: 0,
            pageSize: 100,
            pageType: 1,
            tableId: 544,
            filterList: []
          }
        }"
        :search-key="'CENTERPRISENAME1'"
        @select="selectData"
        @requestSuccess="requestSuccess"
      />
    </div>
    <div class="box_right">
      <div class="box_right_top">
        <a-input-search
          placeholder="输入项目名称"
          style="width: 200px"
          allow-clear
          @search="cardSearch"
        />
      </div>
      <div class="box_right_bottom">
        <XcCard
          :map="CARD_MAP"
          :card-list="cardList"
          :silder-bar-checked-key="silderBarCheckedKey"
          :total="pageConfig.total"
          :page-size="pageConfig.pageSize"
          :current-page="pageConfig.currentPage"
          @paginationChange="paginationChange"
        />
      </div>
    </div>
  </div>
</template>
<script>
/*
   {
                col: 'CENTERPRISECODE1',
                value: '',
                symbol: 'is'
              } */
import CommonSliderBar from '@/components/CommonSliderBar';
import baseUrl from '@/utils/processRequest1';
import XcCard from '@/views/XcItemCard/components/Card.vue';
import { getQueryBodyByProduce } from '@/api/dynamicInterface';

const CARD_MAP = {
  CPROGRAMNAME: 'CPROGRAMNAME', // 项目名
  YSS: 'YSS',
  ZFS: 'ZFS',
  ZXL: 'ZXL'
};

export default {
  components: {
    CommonSliderBar,
    XcCard
  },
  data() {
    return {
      CARD_MAP,
      pageConfig: {
        pageSize: 9,
        currentPage: 1,
        total: 100
      },
      url: '',
      silderBarCheckedKey: '',
      cardList: []
    };
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      baseUrl().then(res => {
        this.url = res.url;
        this.Year = localStorage.getItem('chooseYear');
        this.$nextTick(() => {
          this.$refs.silderBar.send();
        });
      });
    },

    getCardList(val = '') {
      const key = this.silderBarCheckedKey;
      const { pageSize, currentPage } = this.pageConfig;
      const requestData = {
        tableId: 545,
        year: this.year,
        pageIndex: currentPage - 1,
        pageSize,
        pageType: 1,
        filterList: [
          {
            col: 'CENTERPRISECODE1',
            symbol: 'ed',
            value: Number(key)
          },
          {
            col: 'CPROGRAMNAME',
            symbol: 'ed',
            value: val
          }
        ]
      };
      getQueryBodyByProduce(requestData).then(res => {
        if (res.success) {
          if (res.data === '') {
            this.cardList = [];
          }
          if (res.data) {
            // const CPROGRAMNAME = CARD_MAP.CPROGRAMNAME;
            // const YSS = CARD_MAP.YSS;
            // const ZXL = CARD_MAP.ZXL;
            // const ZFS = CARD_MAP.ZFS;
            res.data.forEach(item => {
              //   item.name = item[CPROGRAMNAME];
              //   item.YSS = item[YSS];
              //   item.ZFS = item[ZFS];
              //   item.ZXL = item[ZXL];
              item.year = this.year;
            });
            this.cardList = res.data;
          }
          this.pageConfig.total = res.total;
        }
      });
    },

    selectData(val) {
      const { key } = val;
      this.silderBarCheckedKey = key;
      this.getCardList();
    },

    paginationChange(val) {
      this.pageConfig.currentPage = val;
      this.getCardList();
    },
    requestSuccess({ pageIndex }) {
      if (pageIndex === 1) {
        this.$refs.silderBar.menu.selectedKeys = [
          this.$route.query.CENTERPRISECODE1
        ];
        this.silderBarCheckedKey = this.$route.query.CENTERPRISECODE1;
        this.getCardList();
      }
    },
    // 搜索项目名
    cardSearch(val) {
      this.getCardList(val);
    }
  }
};
</script>
<style lang="scss" scoped>
$vw: 1920px;
@function px2vw($px) {
  @return $px / $vw * 100vw;
}
.box {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  background: #e6e9f0;
}
.box_left {
  width: 13%;
  background: #ffffff;
}
.box_right {
  width: 87%;
  padding: px2vw(24px);

  .box_right_top {
    height: 5.5%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
  .box_right_bottom {
    height: 94.5%;
  }
}
</style>
